<template>
  <div>
    <!-- <gujia v-if="a"></gujia> -->
    <!-- <template v-else></template> -->
    <!-- 导航栏开始 -->
    <nav>
      <div class="iconfont">&#xe62f;杭州</div>
      <span>
        <div>综合</div>
        <div>销量</div>
      </span>
      <div class="iconfont" @click="appear">&#xe6b7;筛选</div>
    </nav>
    <!-- 导航栏结束 -->
    <!-- 搜索框的制作开始 -->
    <router-link to="/search">
      <div class="search">
        <input type="text" />
        <span class="iconfont">&#xe61c;</span>
        <van-swipe
          class="dynamic"
          :autoplay="5000"
          :show-indicators="false"
          vertical
        >
          <van-swipe-item>小蛋糕不来点吗</van-swipe-item>
          <van-swipe-item>vip99元</van-swipe-item>
          <van-swipe-item>搜索丰富的蛋糕</van-swipe-item>
          <van-swipe-item>想要什么点一下你就知道</van-swipe-item>
        </van-swipe>
      </div>
    </router-link>
    <!-- 导航栏中的筛选开始 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '65%' }"
    >
      <div class="sift">
        <div class="sift1">
          <div>筛选</div>
          <ul>
            <p>口味</p>
            <li
              @click="taste_search(item.typeid)"
              v-for="item in tastes"
              :key="item.typeid"
            >
              {{ item.description }}
            </li>
          </ul>
        </div>
        <button @click="click_determine" style="color: white">确定</button>
      </div>
    </van-popup>
    <!-- 导航栏中的筛选结束 -->
    <!-- 主题开始 -->
    <!-- 回到顶部 -->
    <div @click="top" class="peaked"></div>
    <!-- 图片 -->
    <div class="picture"><img src="img/1.jpg" alt="" /></div>
    <!-- 商品列表 -->
    <div class="doods">
      <ul>
        <li v-for="item in commodity" :key="item.cid">
          <router-link :to="`/detail?id=${item.cid}&name=${item.cakename}`">
            <img :src="`${item.cake_pic}`" alt="" />
            <div v-if="item.cake_label" class="standard">
              <img src="img/6.png" alt="" />
              <p>{{ item.cake_label }}</p>
            </div>
            <div>
              <span>{{ item.cakename }}</span>
              <span v-if="item.type_description" class="type_description">{{
                item.type_description
              }}</span>
              <span class="description">{{ item.cake_description }}</span>
              <span class="price">￥{{ item.cake_price }}</span>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="finally">————不好意思到底了————</div>
    </div>
    <!-- 主题结束 -->
    <foot></foot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: null,
      standard: true,
      //点击获取口味
      taste: "",
      //存放的所有的数据
      commodity: [],
      //存放的所有口味
      tastes: [],
      //点击确定的时候来查找知道的口味
      determine: false,
      a: true,
    }
  },
  //创建结束
  created() {
    //导入所有的商品数据
    // let url = "/v1/product/list";
    this.$get("/v1/product/list").then(res => {
      this.commodity = res.data.data
    })
    //导入所有的口味
    this.$get("/v1/product/taste").then(res => {
      this.tastes = res.data.data
    })
  },
  //挂载结束
  // beforeMount () {
  //   this.a=false;
  // },
  methods: {
    taste_search(s) {
      // this.ss = e.srcElement.innerHTML;
      // console.log(s);
      this.taste = s
    //console.log(this.taste)
    },
    //点击口味的确定
    click_determine() {
    //console.log(this.determine)
      this.determine = true
    },
    appear() {
      this.show = true
    },
    disappear() {
      this.$refs.sift.style = "display:none;"
    },
    // 慢慢回到顶部的实现
    top() {
      var scrollToTop = setInterval(function () {
        var pos = window.pageYOffset
        if (pos > 0) {
          window.scrollTo(0, pos - 20)
        } else {
          window.clearInterval(scrollToTop)
        }
      }, 1)
    },
  },
  //监听事件
  watch: {
    determine(newValue, oldValue) {
      if (newValue == true) {
        let typeid = this.taste
        this.$get(`/v1/product/flavor_rendering?typeid=${typeid}`).then(
          res => {
          //console.log(res.data.data)
            this.commodity = res.data.data
          }
        )
        this.determine = false
      //console.log("dsfss", newValue)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  font-size: 1rem;
  color: #3e3e3e;
}
img {
  width: 100%;
  height: 100%;
}
nav {
  z-index: 1000;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  line-height: 3rem;
  width: 100%;
  height: 3rem;
  background-color: white;
  border-bottom: 0.0625rem solid #cea461;
}
nav > div {
  padding: 0rem 1rem;
}
nav span div {
  float: left;
  padding: 0rem 1rem;
}
// 筛选开始
.sift {
  width: 100%;
  height: 100%;
  background-color: rgba($color: #666666, $alpha: 0.4);
}
.sift button {
  position: absolute;
  bottom: 0rem;
  right: 0rem;
  background-color: #cea461;
  border: 0.1rem solid #cea461;
  width: 100%;
  height: 3rem;
}
.sift .sift1 {
  position: absolute;
  right: 0px;
  height: 100%;
  background-color: #ffffff;
  color: #cea461;
}
.sift .sift1 div {
  width: 100%;
  height: 3.5rem;
  line-height: 3.5rem;
  border-bottom: 0.1rem solid #cea461;
  padding: 0px 1.7rem;
}
.sift .sift1 ul {
  justify-content: space-between;
  width: 80%;
  margin: auto;
  text-align: center;
}
.sift .sift1 ul li {
  float: left;
  width: 45%;
  height: 2rem;
  line-height: 1.5625rem;
  border-radius: 0.3rem;
  border: 0.15rem solid #dee1e6;
  margin-top: 0.3rem;
}
.sift .sift1 ul li:hover {
  border: 0.1rem solid #cea461;
}

.sift .sift1 ul li:nth-child(n) {
  margin-left: 0.2rem;
}
.sift .sift1 p {
  text-align: left;
  margin: 0.5rem 0rem;
}
//搜索框开始
.search {
  position: relative;
  width: 100%;
  height: 3rem;
  background-color: #cea461;
  margin-top: 3rem;
  color: black;
}
.search input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  margin: auto;
  border-radius: 0.625rem;
  border: 0rem;
  overflow: hidden;
}
.search span {
  width: 10%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15%;
}
.search .dynamic {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-10%, -50%);
  width: 50%;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: left;
}
//主题开始
//回到顶部
.peaked {
  z-index: 1000;
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  width: 3rem;
  height: 3rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 50%;
  background: url(/img/7.png) no-repeat;
  background-size: 100%;
}
//图片开始
.picture {
  overflow: hidden;
  width: 90%;
  margin: auto;
  height: 15rem;
  margin-top: 1rem;
}
.picture img {
  display: block;
  width: 100%;
  height: 100%;
}
// 商品列表开始
.doods {
  margin: auto;
  margin-top: 3rem;
  width: 90%;
}
.doods ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.doods ul li {
  position: relative;
  border-radius: 0.7rem;
  overflow: hidden;
  width: 48%;
  height: 16rem;
}
.doods ul li:hover {
  box-shadow: 0rem 0rem 0.5rem 0.1rem #dee1e6;
}
.doods ul li img {
  display: block;
  width: 100%;
  height: 60%;
}
.doods ul li .standard {
  z-index: 100;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 35%;
  height: 5rem;
}
.doods ul li .standard p {
  position: absolute;
  top: 15%;
  left: -10%;
  transform: rotate(315deg);
  font-size: 00.1rem;
  color: black;
}
.doods ul li span {
 
  display: block;
  font-size: 0.9375rem;
  color: black;
  padding-left: 0.4rem;
}
.doods ul li .type_description {
  color: white;
  display: inline-block;
  background-color: #cea461;
  padding-right: 0.4rem;
  border-radius: 10rem;
}
.doods ul li .description {
  width: 100%;
  overflow: hidden;
  white-space:nowrap; 
  text-overflow: ellipsis;
  color: #aaaaaa;
}
.doods ul li .price {
  position: absolute;
  left: 0rem;
  bottom: 0rem;
  color: #cea461;
}
// 底部没有商品
.doods .finally {
  width: 90%;
  height: 2rem;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  background-color: rgb(255, 225, 169);
}
</style>
